<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test for jQuery validate() plugin</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cmxforms.js" type="text/javascript"></script>
<script src="js/metadata.js" type="text/javascript"></script>
<script src="js/validate.js" type="text/javascript"></script>

</head>
<body>

<div id="selecttest">
<h2>Some tests with selects</h2>
<p>
<label for="jungle">Please select a jungle noun</label><br/>
<select id="jungle" title="Please select something!" validate="required:true">
	<option value=""></option>
	<option value="1">Buga</option>
	<option value="2">Baga</option>
	<option value="3">Oi</option>
</select>
</p>

<p>
<label for="fruit">Please select at least two fruits</label><br/>
<select id="fruit" title="Please select at least two fruits" validate="minLength:2" multiple="multiple">
	<option value="b">Banana</option>
	<option value="a">Apple</option>
	<option value="p">Peach</option>
	<option value="t">Turtle</option>
</select>
</p>

<p>
<label for="vegetables">Please select no more then two vergetables</label><br/>
<select id="vegetables" title="Please select no more then two vergetables" validate="required:true, maxLength:2" multiple="multiple">
	<option value="p">Potato</option>
	<option value="t">Tomato</option>
	<option value="s">Salad</option>
</select>
</p>

<p>
<label for="cars">Please select at least two cars, but no more then three</label><br/>
<select id="cars" title="Please select at least two cars, but no more then three" validate="rangeLength:[2,3]" multiple="multiple">
	<option value="m_sl">Mercedes SL</option>
	<option value="o_c">Opel Corsa</option>
	<option value="vw_p">VW Polo</option>
	<option value="t_s">Titanic Skoda</option>
</select>
</p>

<p><button id="validateSelects">Validate Selecttests</button></p>
</div>

<script type="text/javascript">
	$.meta.setType("attr", "validate");
	$(document).ready(function() {
		$("#validateSelects").click(function() {
			$("#selecttest select").validate({debug: true});
		});
	});
</script>

<a href="validateTest.html">Back to main page</a>

</body>
</html>